<template>
	<div class="material-container">
		<el-card class="!border-none" shadow="never" :body-style="{ padding: '10px 20px 20px 20px' }">
			<el-tabs v-model="activeTab">
				<el-tab-pane v-for="item in tabsMap" :label="item.name" :name="item.type" :index="item.type"
					:key="item.type" lazy>
					<attachment :limit="30" :type="item.type" scene="attachment" ref="attachmentRef" />
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script lang="ts" setup name="material">
import { ref } from 'vue';
import attachment from '/@/components/uploadAttachment/attachment.vue';

const attachmentRef: Record<string, any> | null = ref(null);

const tabsMap = [
	{
		type: 'image',
		name: '图片'
	},
	{
		type: 'video',
		name: '视频'
	},
	{
		type: 'file',
		name: '文件'
	}
]
const activeTab = ref('image')
</script>

<style lang="scss" scoped>
.material-container {
	.attachment-content {
		border: none;
		height: 600px;
	}

	.el-upload-list {
		position: absolute;
		z-index: 5;
	}

	.el-upload-list__item {
		background: var(--el-dialog-bg-color);
		box-shadow: var(--el-dialog-box-shadow);
	}
}
</style>
<style lang="scss">
.material-container {
	.el-tabs__header {
		margin: 0;
	}

	.el-tree-node__content {
		height: 30px;
	}

	.attachment-content .attachment-content-left .cate-list .el-tree {
		height: 540px;
	}
}
</style>
